<div ng-hide="loaded" style="padding: 2em;">
  <div class="loading">Loading. Please wait...</div>
  <div class="status">{{status}}</div>
</div>

<div ng-show="loaded">

  <h4 class="space-above"><a id="my_projects"></a>Projects</h4>

  <table class="table-condensed">

    <thead>
      <tr>
        <th></th>
        <th class="project_id" ng-show="config.is_admin">Id</th>
        <th class="project_name">Name</th>
        <th class="project_description">Description</th>
        <th class="project_writers" ng-show="config.is_admin">Writers</th>
        <th></th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <tr class="project_row" ng-repeat="project in projects | orderBy:'orderby':true" ng-class="{ghost: !project.key}">
        <td>
            <button ng-show="project.writable" class="btn btn-small btn-primary" ng-disabled="!project.key" ng-click="select_project(project)">
              <i class="icon-share-alt icon-white"></i> open project
            </button>
            <button ng-show="!project.writable && !project.in_progress_task_name" class="btn btn-small" ng-disabled="!!project.in_progress_task_name" ng-click="new_project(project)">
              <i class="icon-plus"></i> make a copy
            </button>
            <span ng-show="!!project.in_progress_task_name">(Fetching...)</span>
        </td>
        <td class="project_id diag" ng-show="config.is_admin">{{project.key}}</td>
        <td class="project_name">{{project.name}}</td>
        <td class="project_description">{{project.description}}</td>
        <td class="project_writers diag" ng-show="config.is_admin">{{project.writers}}</td>
        <td>
          <a ng-show="config.is_admin && !project.writable" ng-class="{disabled: !project.key}" ng-click="recreate_template_project(project)" title="refresh project"><i class="icon-refresh"></i></a>
        </td>
        <td>
          <a ng-show="config.is_admin || project.writable" ng-click="prompt_delete_project(project)" title="delete project"><i class="icon-trash"></i></a>
        </td>
      </tr>

    </tbody>

  </table>

  <div>
    <h4 class="space-above">Import new projects</h4>
    <form class="form-horizontal">
      <div class="control-group">
        <label class='control-label' for='import_url'>Github project URL</label>
        <div class="controls">
          <div class="input-append">
            <input class='span6' type='url' id='import_url'
                   ng-model='import_url' required
                   placeholder="https://github.com/github_user_id/repo_name">
            <button class="btn" type="submit" ng-click="create_template_project_by_url(import_url)">Import</button>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>
